<template>
  <div class="loginDiv">
    <div style="float: left;width: 100%">
      <el-tabs :tab-position="tabPosition" style="height: 1000px;">
        <el-tab-pane label="基本信息">
          <div style="margin-left: 100px">
            <div>
              <span><img src="../assets/toux.jpeg" width="100px" height="100px"/></span>
            </div>
            <div style="margin-top: 10px">姓名：{{userInfo.realName}}</div>
            <div style="margin-top: 10px">座右铭：{{userInfo.motto}}</div>
            <!--<div style="margin-top: 10px">工作经验：无</div>-->
            <div style="margin-top: 10px">目标职业：{{userInfo.aimJob}}</div>
            <div style="margin-top: 10px">目标城市：{{userInfo.aimCity}}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的成就">
          <div style="margin-left: 100px">
            <div>最近学习</div>
            <div style="border-bottom:1px solid #ccc;"></div>
            <div style="margin-top: 20px;margin-bottom: 20px">
              <li class="el-icon-edit"></li>
              总练习：{{practice.weekNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <li class="el-icon-check"></li>
              正确：{{practice.rightNum}}
              <el-rate
                v-model="value2"
                disabled
                show-score
                text-color="#ff9900">
              </el-rate>
            </div>
            <div>我的技能达成度</div>
            <div style="border-bottom:1px solid #ccc;"></div>
            <div style="margin-top: 20px">
              <table>
                <tr>
                  <td v-for="item in skillStacks">
                    <el-progress type="circle" :percentage="item.value"></el-progress>
                  </td>
                </tr>
                <tr>
                  <td style="text-align: center" v-for="item in skillStacks">{{item.key|statusFilter}}</td>
                </tr>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我要发布" v-if="userInfo.isAdmin==1">
          <div style="margin-left: 100px;margin-top: 10px">
            <div style="">
              <el-form ref="itemFrom" :model="itemFrom" label-width="100px" class="formDiv" size="small">
                <el-form-item label="题目" :rules="{
      required: true, message: '昵称不能为空', trigger: 'blur'
    }">
                  <el-input type="textarea" v-model="itemFrom.item"></el-input>
                </el-form-item>
                <el-form-item label="解析">
                  <el-input type="textarea" v-model="itemFrom.analysis"></el-input>
                </el-form-item>
                <el-form-item label="选项1">
                  <el-input v-model="itemFrom.option1"></el-input>
                </el-form-item>
                <el-form-item label="选项2">
                  <el-input v-model="itemFrom.option2"></el-input>
                </el-form-item>
                <el-form-item label="选项3">
                  <el-input v-model="itemFrom.option3"></el-input>
                </el-form-item>
                <el-form-item label="选项4">
                  <el-input v-model="itemFrom.option4"></el-input>
                </el-form-item>
                <el-form-item label="正确选项">
                  <el-radio-group v-model="itemFrom.isRight">
                    <el-radio label="1">1</el-radio>
                    <el-radio label="2">2</el-radio>
                    <el-radio label="3">3</el-radio>
                    <el-radio label="4">4</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select v-model="itemFrom.type" placeholder="请选择试题类型">
                    <el-option label="java基础" value="1"></el-option>
                    <el-option label="数据库" value="2"></el-option>
                    <el-option label="网页设计" value="3"></el-option>
                    <el-option label="Python" value="4"></el-option>
                  </el-select>
                  <el-checkbox-group v-model="itemFrom.type">

                  </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="poblicItem()">发布</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="后台管理" v-if="userInfo.isAdmin==1">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              type="index"
              width="50px">
            </el-table-column>
            <el-table-column
              prop="title"
              label="题目"
              width="180">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="时间"
              width="180">
              <template slot-scope="scope">
                {{scope.row.createTime|formatDate}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="240">
              <template slot-scope="scope">
                <el-button type="success" @click="getItem(scope.row.id)">修改</el-button>
                <el-button type="error" @click="deleteItem(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="5"
                           @current-change="handleCurrentChange">
            </el-pagination>
          </div>
          <div style=" width:100%;border-bottom:  1px solid #ccc;margin-top: 20px"></div>
          <div style="">
            <el-form ref="itemFrom" :model="itemFrom" label-width="100px" class="formDiv" size="small">
              <el-form-item label="题目" :rules="{
      required: true, message: '昵称不能为空', trigger: 'blur'
    }">
                <el-input type="textarea" v-model="itemFrom.item"></el-input>
              </el-form-item>
              <el-form-item label="解析">
                <el-input type="textarea" v-model="itemFrom.analysis"></el-input>
              </el-form-item>
              <el-form-item label="选项1" v>
                <el-input v-model="itemFrom.option1"></el-input>
              </el-form-item>
              <el-form-item label="选项2">
                <el-input v-model="itemFrom.option2"></el-input>
              </el-form-item>
              <el-form-item label="选项3">
                <el-input v-model="itemFrom.option3"></el-input>
              </el-form-item>
              <el-form-item label="选项4">
                <el-input v-model="itemFrom.option4"></el-input>
              </el-form-item>
              <el-form-item label="正确选项">
                <el-radio-group v-model="itemFrom.isRight">
                  <el-radio label="1">1</el-radio>
                  <el-radio label="2">2</el-radio>
                  <el-radio label="3">3</el-radio>
                  <el-radio label="4">4</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="itemFrom.type" placeholder="请选择试题类型">
                  <el-option label="java基础" value="1"></el-option>
                  <el-option label="数据库" value="2"></el-option>
                  <el-option label="网页设计" value="3"></el-option>
                  <el-option label="Python" value="4"></el-option>
                </el-select>
                <el-checkbox-group v-model="itemFrom.type">

                </el-checkbox-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateItem()">修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>

    <!--<div style="float: left;margin-left: 1%"></div>-->
  </div>
</template>

<script>
  import axios from 'axios'
  import {formatDate} from '../utils/date.js';
  import uploadCom from './uploadCom';


  export default {
    data() {
      return {
        total: 20,
        loginForm: {
          username: '',
          password: ''
        },
        itemFrom: {
          item: '',
          type: '',
          option1: '',
          option2: '',
          option3: '',
          option4: '',
          analysis: '',
          isRight: ''
        },
        userInfo: {
          realname: '',
          username: '',
          password: '',
          motto: '',
          aimCity: '',
          aimJob: '',
          type: [],
          resource: 3
        },
        tabPosition: 'left',
        value2: 3.7,
        skillStacks: [],
        practice: {},
        tableData: [],
        itemId: 0
      }
    },
    components: {
      uploadCom
    },
    watch: {
      "$route": 'checkoutRouter'
    },
    created() {
      this.checkoutUser();
      this.getDate();
      this.getUser();
      this.getItemData();
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'java',
          2: '数据库',
          3: 'HTML',
          4: 'python'
        }
        return statusMap[status]
      },
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
        //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
      }
    },
    methods: {
      checkoutRouter() {
        alert("df")
      },
      checkoutUser() {
        var _self = this;
        let _username = this.$store.state.username;
        if (_username == '') {
          _self.$router.push('/login');
        }
      },
      clearItem() {
        var _self = this;
        _self.itemFrom.item = ''
        _self.itemFrom.option1 = ''
        _self.itemFrom.option2 = ''
        _self.itemFrom.option3 = ''
        _self.itemFrom.option4 = ''
      },
      getItem(itemId) {
        var _self = this;
        let url = 'item/one/' + itemId;
        _self.$http.get(url)
          .then(function (response) {
            var _data = response.data;
            if (_data.ret == true) {
              _data = _data.data;
              _self.itemFrom.item = _data.title;
              _self.itemFrom.option1 = _data.option1;
              _self.itemFrom.option2 = _data.option2;
              _self.itemFrom.option3 = _data.option3;
              _self.itemFrom.option4 = _data.option4;
              _self.itemId = itemId;
            } else {
              alert(_data.error);
            }
            _self.finish = false;
          }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            var params = new URLSearchParams();
            params.append('username', this.loginForm.username);
            let _self = this;
            let url = "/item";
            _self.$http.get(url)
              .then(function (response) {
                console.log(response.data.title)
                formName.username = response.data.title;
                // _self.$router.push('forum')
              }).catch(function (error) {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getDate() {
        var _self = this;
        var _username = this.$store.state.username;
        let url = 'login/stastic';
        _self.$http.get(url, {params: {username: _username}})
          .then(function (response) {
            var _data = response.data;
            if (_data.ret == true) {
              console.log(_data)
              _self.skillStacks = _data.data.skillStack
              _self.practice = _data.data.practice
            } else {
              alert(_data.data);
            }
            _self.finish = false;
          }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
      getUser() {
        var _self = this;
        let url = 'login';
        let _username = this.$store.state.username;
        _self.$http.get(url, {params: {username: _username}})
          .then(function (response) {
            var _data = response.data;
            if (_data.ret == true) {
              _self.userInfo = _data.data;
            } else {
              alert(_data.data);
            }
            _self.finish = false;
          }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
      poblicItem() {
        var _self = this;
        let url = 'item';
        var params = new URLSearchParams();
        params.append('item', this.itemFrom.item);
        params.append('type', this.itemFrom.type);
        params.append('analysis', this.itemFrom.analysis);
        let option = this.itemFrom.option1 + ',' + this.itemFrom.option2 + ',' + this.itemFrom.option3 + ',' + this.itemFrom.option4 + ',' + this.itemFrom.isRight
        params.append('options', option);

        _self.$http.post(url, params)
          .then(function (response) {
            var _data = response.data;
            if (_data.ret == true) {
              _self.$message({message: '上传成功', type: 'success'})

            } else {
              _self.$message({message: '上传失败', type: 'error'})
            }
            _self.finish = false;
          }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
      updateItem() {
        var _self = this;
        let url = 'item/update/' + this.itemId;
        var params = new URLSearchParams();
        params.append('item', this.itemFrom.item);
        params.append('type', this.itemFrom.type);
        let option = this.itemFrom.option1 + ',' + this.itemFrom.option2 + ',' + this.itemFrom.option3 + ',' + this.itemFrom.option4 + ',' + this.itemFrom.isRight
        params.append('options', option);
        _self.$http.post(url, params)
          .then(function (response) {
            var _data = response.data;
            if (_data.ret == true) {
              _self.$message({message: '更新成功', type: 'success'})

            } else {
              _self.$message({message: '上传失败', type: 'error'})
            }
            _self.finish = false;
          }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
      handleCurrentChange(currentPage) {
      this.getItemData(currentPage);
      },
      getItemData(currentPage) {
        var _self = this;
        let url = 'item';
        _self.$http.get(url,{params: {page: currentPage, size: 5}}).then(function (response) {
          var _data = response.data;
          _self.total = _data.total;
          if (_data.ret == true) {
            _self.tableData = _data.data;
          } else {
            _self.$message({message: '获取失败', type: 'error'})
          }
          _self.finish = false;
        }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      },
      deleteItem(itemId) {
        var _self = this;
        let url = 'item/delete/' + itemId;
        _self.$http.post(url).then(function (response) {
          var _data = response.data;
          console.log(_data);
          if (_data.ret == true) {
            _self.getItemData();
            _self.$message({message: '删除成功', type: 'error'})
          } else {
            _self.$message({message: '获取失败', type: 'error'})
          }
          _self.finish = false;
        }).catch(res => {
          throw new Error('MaiSec.vue: ', res)
        })
      }
    }
  }
</script>
<style>
  .loginDiv {
    width: 100%;
    height: 1100px;
    margin-top: 2%;
    /*background-color: #EEEEEE;*/
    background-color: #ffffff;
    margin-left: 5%;
    margin-right: 5%;
  }

  .formDiv {
    margin-top: 10px;
    background-color: #ffffff;
    /*margin-left: 15%;*/
    margin-right: 15%;
  }
</style>
